<template>
 <div class="wrap" id="app" v-cloak>
  <img src="../assets/3.jpg" alt="" class="a">
        <!-- 整体播放器部分 -->
        <div class="play_wrap">
            <!-- 头部 -->
            <div class="search_bar">
                <a href="javascript:location.reload();" class="refresh">
                    <p class="player_title">懂你的网易云</p>
                </a>
                <input type="text" @keyup.enter="searchMusic" v-model="query">
                <img src="../images/zoom.png" @click="searchMusic" class="search" alt="">
            </div>
            <!-- 中间 -->
            <div class="center_con">
                <!-- 中间的左边 -->
                <div class="song_wrapper">
                    <!-- 歌曲列表 -->
                    <ul class="song_list">
                        <li v-for="(item,y) in musicList" :key="y">
                            <a href="javascript:;" @click="playMusic(item.id)"></a>
                            <b>{{ item.name }}--{{item.artists[0].name}}</b>
                            <span><i v-if="item.mvid!=0" @click="playMv(item.mvid)"></i></span>
                        </li>
                    </ul>
                    <img src="../images/line.png" class="left_line" alt="line">
                </div>
                <!-- 中间的中间 -->
                <div class="player_con" :class="{playing:isPlaying}">
                    <img src="../images/player_bar.png" class="play_bar" alt="bar">
                    <img src="../images/disc.png" class="disc autoRotate" alt="disc">
                    <img :src="coverUrl==''?'./images/三笠.png':coverUrl" class="cover autoRotate" alt="cover">
                </div>
                <!-- 中间的右边 -->
                <div class="comment_wrapper">
                    <h5 class="title">热门留言</h5>
                    <!-- 热评列表 -->
                    <div class="comment_list">
                        <dl v-for="(item,y) in comments" :key='y'>
                            <dt><img src="../images/person.png" alt="person"></dt>
                            <dd class="name">{{ item.user.nickname }}</dd>
                            <dd class="detail">{{ item.content }}</dd>
                        </dl>
                    </div>
                    <img src="../images/line.png" class="right_line" alt="">
                </div>
            </div>
            <!-- 尾部 -->
            <div class="audio_con">
                <!-- 音乐播放器 -->
                <audio :src="musicUrl" @play="play" @pause="pause" ref="audios" controls autoplay loop
                    class="myaudio"></audio>
            </div>
            <div class="video_con" style="display: none;" v-show="isShowing">
                <!-- mv播放器 -->
                <video :src="mvUrl" controls></video>
                <!-- 遮罩层 -->
                <div class="mask" @click="hide"></div>
            </div>
        </div>
    </div>
</template>

<script>

import axios from '../utils/axios'
export default {
  created() {
    this.searchMusic()
    
  },
  data() {
    return {
      query: "再飞行",
        musicList: [],
        musicUrl: "",
        coverUrl: "",
        comments: [],
        isPlaying: false,
        mvUrl: "",
        isShowing: false
    }
  },
  methods: {
    searchMusic: async function () {
      var that = this;
      // console.log(that);
          // await axios.get("https://autumnfish.cn/search?keywords=" + this.query)
          axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function (response) {
              console.log(response.data.result.songs);
              that.musicList = response.data.result.songs;
          }, function (err) {})
      },
     
      playMusic: function (musicId) {
          var that = this;
          axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function (response) {
              console.log(response);
              that.musicUrl = response.data.data[0].url;
          }, function (err) {})

          axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(function (response) {
              // console.log(response);
              that.coverUrl = response.data.songs[0].al.picUrl;
          }, function (err) {})

          axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(function (response) {
              // console.log(response);
              that.comments = response.data.hotComments;
          }, function (err) {})
      },
      play: function () {
          this.isPlaying = true;
      },
      pause: function () {
          this.isPlaying = false;
      },
      playMv: function (mvId) {
          var that = this;
          axios.get("https://autumnfish.cn/mv/url?id=" + mvId).then(function (response) {
              // console.log(response);
              that.mvUrl = response.data.data.url;
              that.isShowing = true;
              that.$refs.audios.pause();
          }, function (err) {})
      },
      hide: function () {
          this.isShowing = false;
          this.mvUrl = "";
      }
  }
  

}
</script>1

  <style scoped>
  #app {
    background-color: #84afa6 !important;
  }
 .el-main {
    background-color: #84afa6;
    z-index: 88;
}
[v-cloak] {
    display: none !important;
}
.a {
  width: 85%;
  margin-left: 30px;
}
.wrap {
    position: fixed;
    top: 70;
    left: 70;
     width: 100%;
    height: 100%; 
    
    /* background: url(../images/背景.png) no-repeat 310px 100px;
    background-size: 56% 73%;  */
    
}

.play_wrap {
    width: 1000px;
    height: 700px;
    position: absolute;
    left: 30%;
    top: 35%;
    margin-left: -400px;
    margin-top: -272px;
    
}

.search_bar {
    height: 60px;
    position: relative;
    background-color: #1eda1e;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 11;
}

.refresh {
    text-decoration: none;
}

.player_title {
    margin-left: 23px;
    font-size: 20px;
    color: transparent;
    -webkit-text-stroke: 0.6px white;
    letter-spacing: 0.10em;
    cursor: pointer;
    text-decoration: none;
}

.search_bar input {
    margin-right: 23px;
    width: 296px;
    height: 34px;
    border-radius: 17px;
    border: 0;
    background-color: rgba(255, 255, 255, 0.45);
    /* 第一行缩进15像素 */
    text-indent: 15px;
    outline: none;
}

.search {
    position: absolute;
    right: 35px;
}

.center_con {
    height: 600px;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    position: relative;
}

.song_wrapper {
    width: 200px;
    height: 435px;
    box-sizing: border-box;
    padding: 10px;
    list-style: none;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

.song_list {
    width: 180px;
    height: 555px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 隐藏滚动条 */
.song_list::-webkit-scrollbar {
    display: none;
}

.song_list li {
    height: 40px;
    width: 580px;
    font-size: 12px;
    color: #333;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 10px;
}

/* 给奇数行的li设置背景颜色，rgba(red,green,blue,alpha透明度) */
.song_list li:nth-child(odd) {
    background-color: rgba(240, 240, 240, 0.3);
}

.song_list li a {
    display: block;
    width: 17px;
    height: 17px;
    background: url("../images/play.png");
    background-size: 100%;
    margin-right: 5px;
    box-sizing: border-box;
}

.song_list li b {
    width: 122px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song_list li span {
    width: 23px;
    height: 17px;
    margin-right: 50px;
}

.song_list li span i {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: url("../images/table.png") left -48px no-repeat;
}

.left_line {
    position: absolute;
    right: 0;
    top: 0;
}

.player_con {
    width: 400px;
    height: 435px;
    position: absolute;
    left: 200px;
    top: 0;
}

.disc {
    position: absolute;
    left: 73px;
    top: 140px;
    z-index: 9;
}

.cover {
    position: absolute;
    left: 125px;
    top: 191px;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    z-index: 8;
}

.play_bar {
    position: absolute;
    left: 200px;
    top: -10px;
    z-index: 10;
    transform: rotate(-25deg);
    transform-origin: 12px 12px;
    transition: 1s;
}

.comment_wrapper {
    width: 180px;
    height: 435px;
    position: absolute;
    list-style: none;
    left: 750px;
    top: 0px;
    padding: 25px 10px;
}

.comment_wrapper .title {
    position: absolute;
    top: 0;
    margin-top: 10px;
}

.comment_wrapper .comment_list {
    height: 480px;
    overflow: auto;
   
}

.comment_wrapper .comment_list::-webkit-scrollbar {
    display: none;
}

.comment_wrapper dl {
    padding-top: 10px;
    padding-left: 55px;
    position: relative;
    margin-bottom: 20px;
    margin-top: 0;
}

.comment_wrapper dt {
    position: absolute;
    left: 4px;
    top: 10px;
}

.comment_wrapper dt img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.comment_wrapper dd {
    font-size: 12px;
}

.comment_wrapper .name {
    font-weight: bold;
    color: #333;
    padding-top: 5px;
    margin-left: 0;
}

.comment_wrapper .detail {
    color: #666;
    margin-top: 5px;
    margin-left: 0;
    line-height: 18px;
}

.right_line {
    position: absolute;
    left: 0;
    top: 0;
}

.audio_con {
    height: 50px;
    background-color: #f1f3f4;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.myaudio {
    width: 800px;
    height: 40px;
    margin-top: 5px;
    outline: none;
    background-color: #f1f3f4;
}

.video_con video {
    position: fixed;
    width: 800px;
    height: 546px;
    left: 50%;
    top: 50%;
    margin-top: -273px;
    transform: translateX(-50%);
    z-index: 990;
}

.video_con .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 980;
    background-color: rgba(0, 0, 0, 0.8);
}

@keyframes rotate {
    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(360deg);
    }
}

.autoRotate {
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-duration: 35s;
}

.player_con.playing .disc,
.player_con.playing .cover {
    animation-play-state: running;
    
}

.player_con.playing .play_bar {
    transform: rotate(0);
} 

</style>